<template>
  <transition name="slide">
    <div class="user-center">
      <div class="back" @click="back"><i class="icon-back"></i></div>
      <div class="switches-wrapper">
        <switches @select="selectSwitch" :switches="switches" :currentIndex="currentIndex"></switches>
      </div>
      <div class="play-btn" @click.stop="random">
        <i class="icon-play"></i>
        <span class="text">随机播放全部</span>
      </div>
      <div class="list-wrapper" ref="listWrapper">
        <scroll ref="favoriteList"
                class="list-scroll"
                :data="favoriteList"
                v-if="currentIndex===0">
          <div class="list-inner">
            <song-list :songs="favoriteList"
                       @select="selectSong"></song-list>
          </div>
        </scroll>
        <scroll ref="playHistory"
                v-if="currentIndex===1"
                class="list-scroll">
          <div class="list-inner">
            <song-list :songs="playHistory"
                       @select="selectSong"></song-list>
          </div>
        </scroll>
        <div class="no-result-wrapper" v-show="!hasResult">
          <no-result :title="noResultDesc"></no-result>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import Switches from 'base/switches/switches'
import Song from 'common/js/song'
import Scroll from 'base/scroll/scroll'
import SongList from 'base/song-list/song-list'
import NoResult from 'base/no-result/no-result'
import {mapGetters, mapActions} from 'vuex'
import {playlistMixin} from 'common/js/mixin'

export default {
  name: 'user-center',
  components: {Switches, Scroll, SongList, NoResult},
  data () {
    return {
      currentIndex: 0,
      switches: [
        {name: '我喜欢的'},
        {name: '最近听的'}
      ]
    }
  },
  computed: {
    ...mapGetters(['favoriteList', 'playHistory']),
    noResultDesc () {
      return this.currentIndex === 0 ? '您还没有收藏歌曲' : '最近还没有听歌'
    },
    hasResult () {
      if (this.currentIndex === 0) {
        return this.favoriteList.length > 0
      } else {
        return this.playHistory.length > 0
      }
    }
  },
  mixins: [playlistMixin],
  methods: {
    handlePlaylist (playlist) {
      const bottom = playlist.length > 0 ? '60px' : ''
      this.$refs.listWrapper.style.bottom = bottom
      this.$refs.favoriteList && this.$refs.favoriteList.refresh()
      this.$refs.playHistory && this.$refs.playHistory.refresh()
    },

    ...mapActions(['insertSong', 'randomPlay']),
    back () {
      this.$router.go(-1)
    },
    selectSwitch (index) {
      this.currentIndex = index
    },
    selectSong (item, index) {
      this.insertSong(new Song(item))
    },
    random () {
      let list = this.currentIndex === 0 ? this.favoriteList : this.playHistory
      if (this.length === 0) {
        return
      }
      list = list.map(item => new Song(item))
      this.randomPlay({list})
    }
  }
}
</script>

<style lang="less" scoped>
  @import "~common/css/variable";

  .slide-enter-active, .slide-leave-active {
    transition: all .3s;
  }
  .slide-enter, .slide-leave-to {
    transform: translate3d(100%, 0, 0);
  }
  .user-center {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 100;
    width: 100%;
    background-color: @color-background;
    .back {
      position: absolute;
      top: 0;
      left: 6px;
      z-index: 50;
      .icon-back {
        display: block;
        padding: 10px;
        font-size: @font-size-large-x;
        color: @color-theme;
      }
    }
    .switches-wrapper {
      margin: 10px 0 30px 0;
    }
    .play-btn {
      box-sizing: border-box;
      width: 135px;
      padding: 7px 0;
      margin: 0 auto;
      text-align: center;
      border: 1px solid @color-text-l;
      color: @color-text-l;
      border-radius: 100px;
      font-size: 0;
      .icon-play {
        display: inline-block;
        vertical-align: middle;
        margin-right: 6px;
        font-size: @font-size-medium-x;
      }
      .text {
        display: inline-block;
        vertical-align: middle;
        font-size: @font-size-small;
      }
    }
    .list-wrapper {
      position: absolute;
      top: 110px;
      bottom: 0;
      width: 100%;
      .list-scroll {
        height: 100%;
        overflow: hidden;
        .list-inner {
          padding: 20px 30px;
        }
      }
    }
    .no-result-wrapper {
      position: absolute;
      width: 100%;
      top: 50%;
      transform: translate3d(0,-50%,0);
    }
  }
</style>
